<!-- ERC-设备巡检-巡检规则-查看页面 -->
<template>
  <px-scrollbar v-if="!isMain && isView" class="view-equip-detail">
    <px-button style="margin: 16px 0 24px" type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
    <div>
      <div class="view-equip-title">基础信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">巡检规则编号</div>
            <div class="text">{{ formValue.checkRuleNo || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">巡检规则名称</div>
            <div class="text">{{ formValue.checkRuleName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">地块</div>
            <div class="text">{{ formValue.facName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">巡检对象</div>
            <div class="text">{{ formValue.checkType === "equipment" ? "设备" : formValue.checkType === "environment" ? "环境" : "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">
              {{ formValue.checkType === "equipment" ? "设备类型" : formValue.checkType === "environment" ? "巡检区域" : "-" }}
            </div>
            <div class="text">{{ formValue.eqpTypeName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">规则类型</div>
            <div class="text">{{ formValue.ruleTypeName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">备注</div>
            <div class="text">{{ formValue.remark || "-" }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">巡检内容</div>
    <div v-for="(item, index) in checkRuleContentList" :key="index">
      <EditDropDown :dropdownTitle="item.checkItemContent">
        <template v-slot:content>
          <px-table :data="item.checkRuleContentItemList" style="margin-bottom: 18px" class="equip-table" size="small" max-height="400" border>
            <!-- <px-table-column fixed="left" label="" align="center" width="60">
              <px-icon><ViewList /></px-icon>
            </px-table-column> -->
            <px-table-column fixed="left" type="index" label="序号" width="60" />
            <px-table-column fixed="left" prop="checkItem" label="巡检项" min-width="160" show-overflow-tooltip />
            <px-table-column prop="checkContent" label="巡检内容" min-width="100" show-overflow-tooltip />
            <px-table-column prop="checkContentRangeValue" label="内容范围" min-width="160" show-overflow-tooltip>
              <template #default="scope">
                <div v-if="scope.row.checkContentRange === 1">文本</div>
                <div v-if="scope.row.checkContentRange === 2">数字</div>
                <div v-if="scope.row.checkContentRange === 3">
                  判断：True={{ scope.row.checkContentRangeValue.split(",")[0] }}; False={{ scope.row.checkContentRangeValue.split(",")[1] }}
                </div>
                <div v-if="scope.row.checkContentRange === 4">选择：{{ scope.row.checkContentRangeValue || "-" }}</div>
              </template>
            </px-table-column>
          </px-table>
        </template>
      </EditDropDown>
    </div>
  </px-scrollbar>
</template>
<script setup lang="ts">
import { reactive, toRefs, watch, computed } from "vue";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import { getInspectRule } from "@/api/erc/inspect";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "checkRuleNo"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const state = reactive<any>({
  formValue: {},
  checkRuleContentList: []
});
const { formValue, checkRuleContentList } = toRefs(state);
// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    getDetail();
  } else {
    // 清空全部数据
    formValue.value = {};
    checkRuleContentList.value = [];
  }
});
const getDetail = async () => {
  const dataDetail = await getInspectRule(props.checkRuleNo);
  formValue.value = JSON.parse(JSON.stringify(dataDetail));
  checkRuleContentList.value = formValue.value.checkRuleContentList;
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/erc/scss/view-detail.scss");
</style>
